<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"/><br>
			<!-- ● 也可以使用keyCode去指定具体的按键(不推荐) -->
			<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo"/>
			<!-- ● 系统修饰键(用法特殊) : ctrl、alt、shift、meta
					  ○ 配合keyup使用：按下修饰键的同时，在按下其他键，随后释放其他键，实践才会触发
					  ○ 配合keydown 使用：正常触发事件 -->
			<input type="text"@keyup.ctrl="showInfo" placeholder="按下回车提示输入" />
			<!-- ● Vue.config.keyCondes.自定义键名 = 键码，可以去定制按键别名 -->
			<input type="text"@keyup.huiche="showInfo" placeholder="按下回车提示输入" />
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			Vue.config.keyCodes.huiche = 13;  // 自定义按键别名
			new Vue({
				el:"#root",
				data:{
					name:"尚硅谷"
				},
				methods:{
					showInfo(e){
						console.log(e.target,e.Key);
					}
				}
			})
		</script>
	</body>
</html>
